<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

<ui:composition template="/templates/photoTemplate.xhtml">

	<ui:define name="title">
	Palma Vacation Home
	</ui:define>

	<ui:define name="navReferences">

	</ui:define>

	<ui:define name="body">
		<link rel="stylesheet" type="text/css"
			href="#{request.contextPath}/resources/css/album.css" />

		<link rel="stylesheet" type="text/css"
			href="#{request.contextPath}/resources/css/galleriffic/basic.css" />

		<link rel="stylesheet" type="text/css"
			href="#{request.contextPath}/resources/css/galleriffic/galleriffic-2.css" />

		

		<h1>#{i18N.getTrans('title.city')}</h1>


		<!-- java script will populate this div with photos. -->
		<div id="album">

			<div id="gallery" class="content">
				<div id="controls" class="controls"></div>
				<div class="slideshow-container">
					<div id="loading" class="loader"></div>
					<div id="slideshow" class="slideshow"></div>
				</div>
				<div id="caption" class="caption-container"></div>
			</div>
			<div id="thumbs">
				<ul class="thumbs noscript">

				</ul>
			</div>
		</div>
		
		<script type="text/javascript"
			src="#{request.contextPath}/resources/js/galleriffic/jquery.galleriffic.js"></script>

		<!-- Optionally include jquery.history.js for history support -->
		<script type="text/javascript"
			src="#{request.contextPath}/resources/js/galleriffic/jquery.history.js"></script>
		<script type="text/javascript"
			src="#{request.contextPath}/resources/js/galleriffic/jquery.opacityrollover.js"></script>
		
		<script src="#{request.contextPath}/resources/js/album.js"></script>
		


	</ui:define>
</ui:composition>
</html>
